<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="ch">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>首页</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/resources/favicon.ico}">
    <!-- CSS Library-->
    <link rel="stylesheet" th:href="@{/assets/css/preloader.css}">
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/slick.css}">
    <link rel="stylesheet" th:href="@{/assets/css/metisMenu.css}"/>
    <link rel="stylesheet" th:href="@{/assets/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/fontAwesome5Pro.css}">
    <link rel="stylesheet" th:href="@{/assets/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/jquery.fancybox.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/default.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <script type="text/javascript" th:src="@{/static/layui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
        var userid = [[${session.userid}]];
    </script>
</head>
<body>

<!-- header area start -->
<header th:fragment="myheader">
    <div id="header-sticky" class="header__area grey-bg">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-3 col-lg-3 col-md-4 col-sm-4">
                    <div class="logo">
                        <a href="/"><img src="assets/img/logo/logo.png" alt="logo"></a>
                    </div>
                </div>
                <div class="col-xl-9 col-lg-9 col-md-8 col-sm-8">
                    <div class="header__right p-relative d-flex justify-content-between align-items-center">
                        <div class="main-menu d-none d-lg-block">
                            <nav>
                                <ul>
                                    <li class="menu-item menu-item-has-children dropdown"><a th:href="@{/}">首页</a>
                                    <li class="menu-item menu-item-has-children has-mega-menu"><a th:href="@{/product-listing}">家具列表</a>
                                    <li class="menu-item menu-item-has-children dropdown"><a th:href="@{/user/newslist}">网站公告</a></li>
                                    <li class="menu-item menu-item-has-children dropdown"><a th:href="@{/about}">关于我们</a></li>
                                    <li class="menu-item menu-item-has-children dropdown"><a th:href="@{/contacts}">反馈消息</a></li>
                                </ul>
                            </nav>
                        </div>
                        <div class="mobile-menu-btn d-lg-none">
                            <a href="javascript:void(0);" class="mobile-menu-toggle"><i class="fas fa-bars"></i></a>
                        </div>
                        <div class="header__action">
                            <ul>
                                <li><a href="#" class="search-toggle"><i class="ion-ios-search-strong"></i> 搜索</a></li>
                                <li><a th:if="${session.userid==null}" th:href="@{/login}"></i> 登录&注册 </a>

                                    <div th:if="${session.userid!=null}" style="line-height:40px">
                                        <img src="" style="width:30px;display: none" id="avatars" class="layui-circle">
                                        <a th:href="@{/user/center}" target="_blank"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;个人中心&nbsp;&nbsp;</a>
                                        <!--<a href="//www.runoob.com" target="_blank"><i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp;个人主页&nbsp;&nbsp;</a>-->
                                        <!--<a href="//www.runoob.com"><i class="fa fa-envelope-o" aria-hidden="true"></i>&nbsp;消息通知&nbsp;&nbsp;</a>-->
                                        <a th:href="@{/user/logout}"><i class="fa fa-sign-out" aria-hidden="true"></i>&nbsp;退出登录</a>
                                        <script>
                                            $.ajax({
                                                url: basePath + "/user/avatar",
                                                data: "",
                                                contentType: "application/json;charset=UTF-8",
                                                type: "post",
                                                dataType: "json",
                                                success: function (data) {
                                                    $("#avatars").attr("src",data.data.uimage);
                                                    $("#avatars").show();
                                                },error:function () {
                                                    layer.msg('系统错误', {
                                                        time: 1500,
                                                        icon: 2,
                                                        offset: '150px'
                                                    });
                                                }
                                            });
                                        </script>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- search area start -->
    <section class="header__search white-bg transition-3">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="header__search-inner text-center">
                        <div class="header__search-btn">
                            <a href="javascript:void(0);" class="header__search-btn-close"><i class="fal fa-times"></i></a>
                        </div>
                        <div class="header__search-header">
                            <h3>Search</h3>
                        </div>
                        <div class="header__search-input p-relative">
                            <form class="ps-search--header layui-form" th:action="@{/product-search}" method="get">
                                <input class="form-control" type="text" name="keys"
                                       lay-verify="required" lay-reqtext="关键字，岂能为空？" placeholder="请输入关键字">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="tosearch"><i class="far fa-search"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</header>

<!-- JS here -->
<script type="text/javascript" th:src="@{/assets/js/vendor/modernizr-3.5.0.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/vendor/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/vendor/waypoints.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/metisMenu.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/slick.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/jquery.fancybox.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/isotope.pkgd.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/owl.carousel.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/jquery-ui-slider-range.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/ajax-form.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/wow.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/imagesloaded.pkgd.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/main.js}"></script>
<style>.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}</style>

<!-- JS Library-->
<script type="text/javascript" th:src="@{/static/plugins/jquery/dist/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/bootstrap/dist/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/jquery-bar-rating/dist/jquery.barrating.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/owl-carousel/owl.carousel.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/gmap3.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/imagesloaded.pkgd.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/isotope.pkgd.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/bootstrap-select/dist/js/bootstrap-select.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/jquery.matchHeight-min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/slick/slick/slick.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/elevatezoom/jquery.elevatezoom.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/Magnific-Popup/dist/jquery.magnific-popup.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/jquery-ui/jquery-ui.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/ditugoogle.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/jquery.themepunch.tools.min.js}"></script>
<script type="text/javascript" th:src="@{/static/plugins/revolution/js/jquery.themepunch.revolution.min.js}"></script>
<!-- Custom scripts-->
<script type="text/javascript" th:src="@{/static/js/main.js}"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/common/index.js}"></script>
<script>
    layui.use(['form', 'layer','carousel'], function () {
        var form = layui.form;
        var $ = layui.jquery,
            layer = layui.layer;
        var carousel = layui.carousel;
        carousel.render({
            elem: '#test10'
            , width: '100%'
            , height: '815px'
            ,interval: 5000
        });
    });

    function tologin() {
        location.href = basePath + "/login";
    }
</script>
</body>
</html>